Showing posts with label Basic Web Design (Complete). Show all posts
Showing posts with label Basic Web Design (Complete). Show all posts

[Basic Web Design] Final - The page footer

For this footer, I'll put some background at the bottom left and align the text to the right.
<footer>
<p><a href="#">Home</a> | <a href="#">About Me</a> | <a href="#">Portfolio</a> | <a href="#">Contact Me</a></p>
<p>© 2011 <a href="http://www.arafa-daming.co.cc" target="_blank">Arafa Daming</a></p>
</footer>
The style code :
footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff url(images/footer-bg.png) no-repeat bottom left;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

footer p {
    text-align: right;
    margin: 0;
    padding-right: 20px;
    font-size: 12px;
    }

footer p a {
    text-decoration: none;
    color: #000;
    }

footer p a:hover {
    text-decoration: underline;
    }
Finish! You can view demo at here.

Write by Arafa Daming
Labels:

[Basic Web Design] Part 7 - Styling web content (sub-content)

For the sub-content, I'll put a background for the title and customizing the paragraph.

  <aside id='left-side'>
  <!--Left side content-->
  <h3>Lorem Ipsum</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<img src="images/rss.png" width="48" height="48">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </aside>
Then style up the content :

#left-side h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    background: url(images/icon2.png) no-repeat 12px 0;
    }

#left-side p {
    text-indent: 30px;
    padding: 20px;
    }

#left-side p:first-letter {
    font-size: 20px;
    font-weight: bold;
    }

#left-side img {
    float: right;
    margin: 10px;
    }
 Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 6 - Styling web content (Highlight)

6For this highlight, I'll apply simple image sideshow using jQuery.

First, include j query to your page, paste this code on <head> tag :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Put the image on the highlight section :

<section id='highlight'>
<!--Highlight-->
<img src="images/slide1.png" width="950" height="300">
<img src="images/slide2.png" width="950" height="300">
<img src="images/slide3.png" width="950" height="300">
</section>
Give it style, put this on the <style> tag :

#highlight img { position:absolute; left:0; top:0; }
Lastly, put this script on the <head> tag :

<script>
$(function(){
    $('#highlight img:gt(0)').hide();
    setInterval(function(){$('#highlight :first-child').fadeOut().next('img').fadeIn().end().appendTo('#highlight');}, 3000);
});
</script>
Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 5 - Styling web content (Navigation)

We are suing unordered list for navigation :

<nav>
<!--Navigation-->
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
</nav>
Then give it some style :

ul {
    margin: 15px 0 0 20px;
    padding: 0;
    list-style: none;
    }

ul li {
    display: block;
    }

ul li a {
    float: left;
    width: 200px;
    margin: 0 10px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: #666;
    background: #d2f4f5;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

ul li a:hover {
    color: #d2f4f5;
    background: #666;
    }
Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 4 - Styling web content (Header)

In header, i only use 3D text effect(CSS3) and one image as a background.

<header>
<!--Page title & description-->
<h1>Basic Web Design</h1>
<h2>First web design tutorial by me :D</h2>
</header>
Add this CSS code to the <style> tag :

h1 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 40px;
    padding-left: 30px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }

h2 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }
I put some image at he bottom-right of the header.

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff url(images/banner_design.png) no-repeat bottom right;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
Done! A simple header is ready.

Write by Arafa Daming
Labels:

[Basic Web Design] Part 3 - Styling web layout

Now, we are going to styling web layout and we can see how its look.

Add this style at the <head> tag (After <title> tag)

<style>
body {
    background: #F5F4EF;
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }
/* Enabling HTML5 tags */
header, section, footer, aside, nav, article, figure {
    display: block;
    }

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

nav {
    width: 950px;
    height: 50px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Hightlight Section *****/
#highlight {
    width: 950px;
    height: 300px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Content Section *****/
#content {
    display: table;
    margin: 0 auto;
    width: 950px;
    }

/***** Left Aside *****/
#left-side {
    display: table-cell;
    float: left;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Right Aside *****/
#right-side {
    display: table-cell;
    float: right;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Footer *****/
footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
</style>
Done. You can fill the web layout with your content

Write by Arafa Daming
Labels:

[Basic Web Design] Part 2 - Constructing web layout

The basic markup :
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Design</title>
<head>
<body>
</body>
</html>
Save it as index.html and we already create HTML 5 document. Now, create the web main section into <body> tag :

<header>
<!--Page title-->
</header>

<nav>
<!--Navigation-->
</nav>

<section id='highlight'>
<!--Highlight-->
</section>

<section id='content'>
   <aside id='left-side'>
   <!--Left side content-->
   </aside>

   <aside id='right-side'>
   <!--Right side content-->
   </aside>
</section

<footer>
<!--Footer here-->
</footer>
Next, we will applying style(section width, height, border etc) to this section using CSS3.

Write by Arafa Daming
Labels:

[Basic Web Design] Part 1 - Draw layout

Now, we are going to make basic web design using HTML5 and CSS3. First, we need to draw the web layout.

This is my layout example. You can make your own.

Arafa Daming - Basic web design, Part 1

In this layout, i use 5 main section : header, navigation, highlight, subsection and footer
.
Have a try and draw your main layout. Next, we will write the HTML and CSS script using HTML5 and CSS3.

Write by Arafa Daming
Labels: